<template>
  <div class="keep-warpper">
    keep
    <template v-for="(item, index) in list">
      <span class="tab-item" :class="tabIndex === index ? 'active' : ''" @click="handleClick(index)" :key="item">
        {{ item }}
      </span>
    </template>
    <div class="com-content">
      <keep-alive>
        <component :is="comName"></component>
      </keep-alive>
    </div>
  </div>
</template>
<script>
import A from './components/A.vue'
import B from './components/B.vue'
export default {
  components: { A, B },
  data() {
    return {
      list: ['A组件', 'B组件'],
      tabIndex: 0,
      comName: 'A',
    }
  },
  methods: {
    handleClick(index) {
      this.tabIndex = index
      if (this.tabIndex === 0) {
        this.comName = 'A'
      } else {
        this.comName = 'B'
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.keep-warpper {
  padding: 20px;
}
.tab-item {
  padding: 5px;
  margin: 10px 5px;
  background: #ccc;
  color: #000;
  border-radius: 5px;
  cursor: pointer;
}
.active {
  background: red;
  color: gold;
}
.com-content {
  margin: 20px;
  height: 500px;
  width: 300px;
  border: 1px solid #ccc;
  border-radius: 10px;
}
</style>
